import React, { useEffect } from 'react';
import { Tool } from '../../pages/talk/const';
import voiceImg from '../../assets/img/common/voice.png';
// import addImg from '../../assets/img/common/add.png';
import inputImg from '../../assets/img/ask2/input.png'
import noInputImg from '../../assets/img/ask2/noInput.png'
import submitImg from '../../assets/img/common/sumbit.png'
import './index.css'
import { Input } from 'antd';

interface ChatFooterProps {
  toolsList: Tool[];
  placeholder?: string;
  inputValue?: string; // Add inputValue prop
  onSendMessage?: (message: string) => void;
  onVoiceClick?: () => void;
  onAddClick?: () => void;
  onToolClick?: (tool: Tool) => void;
}

const ChatFooter: React.FC<ChatFooterProps> = ({
  toolsList,
  placeholder = '很高兴为您解答',
  onSendMessage,
  inputValue : expectValue,
  onVoiceClick,
  onAddClick,
  onToolClick
}) => {
  const [inputValue, setInputValue] = React.useState('');
  const [isClick, setIsClick] = React.useState(false)
  const { TextArea } = Input;

  const handleInputChange = (e: string) => {
    setInputValue(e);
  };

  // 外部输入内容，则插入inputValue 
  useEffect(() => {
    if(expectValue){
      setInputValue(expectValue);
    }
  }, [expectValue]);

  // const handleKeyPress = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
  //   if (e.key === 'Enter' && inputValue.trim() && onSendMessage) {
  //     onSendMessage(inputValue);
  //     setInputValue('');
  //   }
  // };

  // 选中标记
  const [selectID, setSelectID] = React.useState(1)
  const handleToolClick = (tool: Tool) => {
    if(tool.id !== 2) setSelectID(tool.id)
    if (onToolClick) {
      onToolClick(tool);
    }
  };

  const handlePressEnter = () => {
    if (onSendMessage) {
      onSendMessage(inputValue);
      setInputValue('');
    }
  };

  return (
    <div className="w-full rounded-[18px]">
      {/* 横向滚动工具栏 */}
      <div className="flex justify-between overflow-x-auto scrollbar-none" >
        <div className="flex flex-1 gap-[12px] flex-nowrap whitespace-nowrap">
          {/* className={selectID === tool.id ? 'bg-[#E6F0FF]' : ''} */}
          {toolsList.map((tool) => (
            <div 
              key={tool.id} 
              className={[tool.id == selectID ? 'active-item' : '','flex flex-row items-center justify-center px-[15px] py-[9px]  bg-[#EFF7FA] rounded-[18px] cursor-pointer',].join(' ')}
              onClick={() => handleToolClick(tool)}
            >
              <img src={tool.icon} className="w-[25px]  mr-[3px]" alt={tool.name} loading="lazy"/>
              <span className="text-[12px] text-[#3B3B3B] whitespace-nowrap">{tool.name}</span>
            </div>
          ))}
        </div>
      </div>
      <div className="flex items-stretch mt-[16px] gap-[12px]">
        <div 
          className="bg-[#fff] w-[56px] h-[56px] flex items-center justify-center rounded-[12px] cursor-pointer transition duration-150 active:bg-[#e6f0ff] hover:shadow-md"
          onClick={onVoiceClick} 
        >
          <img src={voiceImg} className="w-[21px]" alt="voice" loading="lazy"/>
        </div>
        <div className="flex-1 flex items-center bg-[#fff] rounded-[12px] px-[12px] min-h-[56px] h-auto">
          <TextArea
            className="flex-1 bg-transparent text-[18px] min-h-[25px] h-auto border-none focus:border-none focus:shadow-none"
            placeholder={placeholder}
            onChange={(e) => handleInputChange(e.target.value)}
            onPressEnter={handlePressEnter}
            value={inputValue}
            autoSize={{ minRows: 1, maxRows: 8 }}
          />
          <img src={submitImg} className="w-[28px]" alt="submit" onClick={handlePressEnter} loading="lazy" />
        </div>
        <div 
          className="bg-[#fff] w-[56px] h-[56px] flex items-center justify-center rounded-[12px] cursor-pointer"
          onClick={() => {
            setIsClick(!isClick);
            onAddClick?.()
          }}
        >
          <img src={isClick ? inputImg : noInputImg} className="w-[21px]" alt="add" loading="lazy" />
        </div>
      </div>
    </div>
  );
};

export default ChatFooter;
